{% liquid
  assign bg_full = true
  unless section.settings.padding_to_full_section
  assign bg_full = false
  endunless
  case section.settings.image_placement
    when 'text_first'
      assign image_placement = 'flex-md-row-reverse'
      assign text_fist = true
    when 'image_first'
      assign image_placement = ''
    else
      assign image_placement = 'flex-md-row-reverse'
      assign text_fist = true
  endcase
  
  case section.settings.fontsize
    when 'display-4'
      assign bodysize = 'h4'
      assign mark = 'h2'
    when 'display-5'
      assign bodysize = 'h5'
      assign mark = 'h2'
    when 'h1'
      assign bodysize = 'h6'
      assign mark = 'h3'
    when 'h2'
      assign bodysize = ''
      assign mark = 'h4'
    when 'h3'
      assign bodysize = ''
      assign mark = 'h5'
    endcase

  if section.settings.enable_adjust_h_tag
    assign mark = section.settings.adjust_h_tag_to
  endif
  
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
      assign rounded = true
    when 'secondary'
      assign background_color = 'bg-secondary'
      assign rounded = true
    when 'inverse'
      assign background_color = 'bg-inverse'
      assign rounded = true
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
      assign rounded = true
  endcase
  
  assign img_rounded = 'rounded'
  assign img_rounded_mob = 'rounded'
  unless bg_full
    if rounded
      if text_fist
        assign img_rounded = 'rounded-end'
      else
        assign img_rounded = 'rounded-start'
      endif
      assign img_rounded_mob = 'rounded-top'
    endif
  endunless
  
  case section.settings.section_text_color
    when 'white'
      assign section_text_color = 'text-white'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign section_text_color = ''
      assign richtext_link_style = 'richtext-link-default'
  endcase
  case section.settings.text_position
    when 'center'
      assign text_position = 'align-items-center'
    else
      assign text_position = ''
  endcase
  %}
  <section class="choose as-image-text-switch-container {% if bg_full %}{{ background_color }} py-6 py-lg-9 {% else %} my-6 my-lg-9 {% endif %}">
    <div class="container">
      {% if section.settings.heading != empty or section.settings.description != empty %}
        <div class="no-last-margin mw-text-3 text-center mb-5 mb-md-6 mx-auto {{ section_text_color }}">
          {%- if section.settings.heading != empty -%}
            <{{ mark }} class="mb-2 {{ section.settings.fontsize }} fw-bold">{{ section.settings.heading }}</{{ mark }}>
          {%- endif -%}
          {%- if section.settings.description != empty -%}
            <div class="{{ bodysize }} fw-normal richtext-with-link {{ richtext_link_style }} no-last-margin">{{ section.settings.description }}</div>
          {%- endif -%}
        </div>
      {% endif %}
      <div class="d-none d-md-flex rounded choose-reasons row justify-content-center g-0 py-3 py-md-0 {{image_placement}} {% unless bg_full %}{{ background_color }}{% endunless %}">
        <div class="col-12 col-md-6 d-flex align-items-center position-relative">
          {%- style -%}
            {% liquid
              if section.blocks[0].settings.desktop_image
                assign desktop_image_height = section.blocks[0].settings.desktop_image.height
              endif
              if section.blocks[0].settings.mobile_image
                assign desktop_image_height = section.blocks[0].settings.mobile_image.height
              endif
            %}
            .adapt-content-height-{{ section.id }} {
              min-height: {{ desktop_image_height | divided_by: 2 | append: 'px' }};
            }

            @media screen and (max-width: 767px) {
              .adapt-content-height-{{ section.id }} {
                min-height: {{ mobile_image_height | divided_by: 2 | append: 'px' }}
              }
            }
          {%- endstyle -%}

          {% for block in section.blocks %}
          {%- style -%}
          {% liquid
            assign desktop_image_ratio = 1
            assign mobile_image_ratio = 1
            if block.settings.desktop_image
              assign desktop_image_ratio = block.settings.desktop_image.aspect_ratio
            endif
            if block.settings.mobile_image
              assign mobile_image_ratio = block.settings.mobile_image.aspect_ratio
            endif
            %}
            .adapt-to-image-{{ block.id }}::before{
              padding-bottom: {{ 1 | divided_by: desktop_image_ratio | times: 100 }}%;
              content: '';
              display: block;
              width: 1px;
              margin-left: -1px;
            }
            @media screen and (max-width: 767px) {
              .adapt-to-image-{{ block.id }}::before{
                padding-bottom: {{ 1 | divided_by: mobile_image_ratio | times: 100 }}%;
                content: '';
                display: block;
                width: 1px;
                margin-left: -1px;
              }
            }
          {%- endstyle -%}
          <div class="choose-reason-img ratio adapt-to-image-{{ block.id }} {% if forloop.first %}active{% endif %} w-100 h-100">
            {% if block.settings.desktop_image != blank %}
              <img class="object-fit-cover {{img_rounded}}"
                loading="lazy"
                alt="{{ block.settings.desktop_image.alt | escape }}"
                srcset="{%- if block.settings.desktop_image.width >= 360 -%}{{ block.settings.desktop_image | img_url: '360x' }} 360w,{%- endif -%}
                  {%- if block.settings.desktop_image.width >= 480 -%}{{ block.settings.desktop_image | img_url: '480x' }} 480w,{%- endif -%}
                  {%- if block.settings.desktop_image.width >= 720 -%}{{ block.settings.desktop_image | img_url: '720x' }} 720w,{%- endif -%}
                  {%- if block.settings.desktop_image.width >= 960 -%}{{ block.settings.desktop_image | img_url: '960x' }} 960w,{%- endif -%}
                  {%- if block.settings.desktop_image.width >= 1200 -%}{{ block.settings.desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                  {%- if block.settings.desktop_image.width >= 1440 -%}{{ block.settings.desktop_image | img_url: '1440' }} 1440w,{%- endif -%}
                  {%- if block.settings.desktop_image.width >= 1920 -%}{{ block.settings.desktop_image | img_url: '1920' }} 1920w,{%- endif -%} "
                src="{{ block.settings.desktop_image | img_url: '1920x' }}">
            {% else %}
              <div class="img-placeholder">
                {{ 'collection-4' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
              </div>
            {% endif %}
          </div>
          {% endfor %}
        </div>
        <div class="col-12 col-md-6 d-flex {{text_position}} adapt-content-height-{{ section.id }}">
          <div class="row justify-content-center g-0 ">
            <div class="col-12 py-md-5 py-lg-7 px-md-6 px-lg-8 no-last-margin">
              {%liquid
                case section.settings.text_color
                  when 'white'
                    assign text_color = 'text-white'
                    assign richtext_link_style = 'richtext-link-light'
                  else
                    assign text_color = ''
                    assign richtext_link_style = 'richtext-link-default'
                endcase
               %}
              {% for block in section.blocks %}
                <div class="{{text_color}} mb-md-4">
                    <h3 class="choose-reason {% if forloop.first %}active mt-0{% endif %} {% unless block.settings.text != blank %}pb-0{% endunless %}">{{ block.settings.title }}</h3>
                    <div class="choose-reason-desc {% if forloop.first %}active{% endif %} {% if forloop.last %}mb-0{% endif %} no-last-margin">{{ block.settings.text }}</div>
                </div>
                {%- comment -%}<div class="choose-reason-descs mt-7 space-responsive"></div>{%- endcomment -%}
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
      <div class="d-md-none rounded row justify-content-center g-0 {% unless bg_full %}{{ background_color }}{% endunless %}">
        <div class="col-12 col-md-6 swiper imgSwiper d-flex align-items-center">
          <div class="swiper-wrapper">
            {% for block in section.blocks %}
            <div class="swiper-slide ratio adapt-to-image-{{ block.id }} w-100 h-100">
              {% if block.settings.mobile_image != blank %}
                <img class="object-fit-cover {{img_rounded_mob}}"
                  loading="lazy"
                  alt="{{ block.settings.mobile_image.alt | escape }}"
                  srcset="{%- if block.settings.mobile_image.width >= 360 -%}{{ block.settings.mobile_image | img_url: '360x' }} 360w,{%- endif -%}
                    {%- if block.settings.mobile_image.width >= 480 -%}{{ block.settings.mobile_image | img_url: '480x' }} 480w,{%- endif -%}
                    {%- if block.settings.mobile_image.width >= 720 -%}{{ block.settings.mobile_image | img_url: '720x' }} 720w,{%- endif -%}
                    {%- if block.settings.mobile_image.width >= 960 -%}{{ block.settings.mobile_image | img_url: '960x' }} 960w,{%- endif -%}
                    {%- if block.settings.mobile_image.width >= 1200 -%}{{ block.settings.mobile_image | img_url: '1200x' }} 1200w,{%- endif -%}
                    {%- if block.settings.mobile_image.width >= 1440 -%}{{ block.settings.mobile_image | img_url: '1440' }} 1440w,{%- endif -%} "
                  src="{{ block.settings.mobile_image | img_url: '1440x' }}">
              {% else %}
                <div class="img-placeholder">
                  {{ 'collection-4' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                </div>
              {% endif %}
            </div>
            {% endfor %}
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <div class="col-12 {{text_position}}">
          <div class="row justify-content-center g-0">
            <div class="col-12 text-swiper textSwiper py-4 px-3">
              <div class="swiper-wrapper no-last-margin">
                {% for block in section.blocks %}
                <div class="{{text_color}} swiper-slide {% if forloop.first %}mt-0{% endif %}">
                    <h3 class="swiper-reason">{{ block.settings.title }}</h4>
                    {% if block.settings.text != blank %}
                    <div class="swiper-reason-desc no-last-margin">{{ block.settings.text }}</div>
                    {% endif %}
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
      {%- if section.settings.button_label != empty -%}
        <div class="mt-md-6 mt-5 text-center mx-auto">
          {%- if section.settings.button_label != empty -%}
            {%- if section.settings.button_link != blank -%}
              <a {% render 'link', link: section.settings.button_link %} href="{{ section.settings.button_link }}" class="btn btn-outline-primary">
                {{ section.settings.button_label }}
              </a>
            {%- else -%}
              <div class="btn btn-outline-primary mt-2 disabled cursor-default">
                {{ section.settings.button_label }}
              </div>
            {%- endif -%}
          {%- endif -%}
        </div>
      {%- endif -%}
    </div>
  </section>
  {% schema %}
  {
    "name": "Text switch",
    "class": "image-text-switch",
    "settings":[
      {
        "label": "Heading",
        "type": "text",
        "id": "heading",
        "default": "Heading"
      },
      {
        "type": "checkbox",
        "id": "enable_adjust_h_tag",
        "label": "Enable adjust H tag",
        "default": false
      },
      {
        "type": "select",
        "id": "adjust_h_tag_to",
        "label": "Adjust the H tag to",
        "options": [
          {
            "value": "h1",
            "label": "H1"
          },
          {
            "value": "h2",
            "label": "H2"
          },
          {
            "value": "h3",
            "label": "H3"
          },
          {
            "value": "h4",
            "label": "H4"
          },
          {
            "value": "h5",
            "label": "H5"
          },
          {
            "value": "h6",
            "label": "H6"
          }
        ],
        "default":   "h3"
      },
      {
        "label": "Description",
        "type": "richtext",
        "id": "description"
      },
      {
        "type": "select",
        "id": "fontsize",
        "label": "Fontsize",
        "options": [
          {
            "value": "display-4",
            "label": "Extra large"
          },
          {
            "value": "display-5",
            "label": "Large"
          },
          {
            "value": "h1",
            "label": "Medium"
          },
          {
            "value": "h2",
            "label": "Small"
          },
          {
            "value": "h3",
            "label": "Extra small"
          }
        ],
        "default":   "h1"
      },
      {
        "type": "checkbox",
        "id": "padding_to_full_section",
        "label": "Add background color to the full section",
        "default": false
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "select",
        "id": "section_text_color",
        "label": "Heading color",
        "options": [
          {
            "value": "black",
            "label": "Black"
          },
          {
            "value": "white",
             "label": "White"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
  
          {
            "value": "black",
            "label": "Black"
          },
          {
            "value": "white",
             "label": "White"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "image_placement",
        "label": "Image placement",
        "options": [
          {
            "value": "image_first",
            "label": "Image first"
          },
          {
            "value": "text_first",
            "label": "Text first"
          }
        ],
        "default": "text_first"
      },
      {
        "type": "select",
        "id": "text_position",
        "label": "Text position",
        "options": [
  
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "top",
            "label": "Top"
          }
        ],
        "default": "center"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }
    ],
    "blocks": [
      {
        "name": "Content",
        "type": "content",
        "settings": [
          {
            "label": "Desktop image",
            "type": "image_picker",
            "id": "desktop_image"
          },
          {
            "label": "Mobile image",
            "type": "image_picker",
            "id": "mobile_image"
          },
          {
            "label": "Heading",
            "type": "text",
            "id": "title",
            "default": "Heading"
          },
          {
            "label": "Text",
            "type": "text",
            "id": "text"
          },
          {
            "type": "select",
            "id": "text_color",
            "label": "Text color",
            "options": [
  
              {
                "value": "dark",
                "label": "Dark"
              },
              {
                "value": "light",
                "label": "Light"
              }
            ],
            "default": "dark"
          }
        ]
      }
    ],
    "presets": [
      {
        "category": "Brand",
        "name": "Text switch",
        "blocks": [
          {
            "type": "content"
          },
          {
            "type": "content"
          },
          {
            "type": "content"
          }
        ]
      }
    ]
  }
  {% endschema %}
  